<template>
  <div class="result">
    <div class="result-left">
      <ResultMainChart :integrationData="integrationData"></ResultMainChart>
    </div>
    <div class="result-right">
      <div class="result-right-top">
        <dv-border-box1>
          <ResultLine
            :areaTitle="areaTitle"
            :userArea="userArea"
            :userTotal="userTotal"
            :userTime="userTime"
          ></ResultLine>
          <ResultTopPie :abnormal="abnormal" :nomal="nomal"></ResultTopPie>
        </dv-border-box1>
      </div>
      <div class="result-right-bottom">
        <dv-border-box1>
          <ResultBottomPie :A="A" :B="B" :C="C"></ResultBottomPie>
        </dv-border-box1>
      </div>
    </div>
  </div>
</template>

<script setup>
import ResultMainChart from "./ResultMainChart";
import ResultLine from "./ResultLine";
import ResultTopPie from "./ResultTopPie";
import ResultBottomPie from "./ResultBottomPie";
import { onMounted, ref } from "vue";
import { postAnalysis } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const areaTitle = ref("");
const userArea = ref("");
const userTotal = ref("");
const userTime = ref("");
let abnormal = ref(0); // 异常
let nomal = ref(0); // 正常
let A = ref(0); // A
let B = ref(0); // B
let C = ref(0); // C
// 左侧图表数据
let integrationData = ref([
  {
    type: "A",
    typeName: "A相",
    list: [],
  },
  {
    type: "B",
    typeName: "B相",
    list: [],
  },
  {
    type: "C",
    typeName: "C相",
    list: [],
  },
  {
    type: "void",
    typeName: "异常",
    list: [],
  },
]);

const initResultData = async () => {
  let res = await postAnalysis({ file_name: route.query.file_name });
  console.log(123);
  // 标题 台区+时间
  areaTitle.value =
    res.results[0].collect_transformer +
    "               " +
    res.results[0].collect_time;
  //台区
  userArea.value = res.results[0].collect_transformer;
  // 总数
  userTotal.value = res.results[0].file_id_show.length;
  // 时间
  userTime.value = res.results[0].collect_time;
  // 变量暂存数据 res.results[0].dict_all
  let obj = res.results[0].dict_all;

  for (const key in obj) {
    if (obj[key] === "void") {
      abnormal.value += 1;
      integrationData.value[3].list.push({
        icon: "abnormal",
        name: key,
      });
    } else if (obj[key] === "A") {
      A.value += 1;
      nomal.value += 1;
      integrationData.value[0].list.push({
        icon: "A",
        name: key,
      });
    } else if (obj[key] === "B") {
      B.value += 1;
      nomal.value += 1;
      integrationData.value[1].list.push({
        icon: "B",
        name: key,
      });
    } else if (obj[key] === "C") {
      C.value += 1;
      nomal.value += 1;
      integrationData.value[2].list.push({
        icon: "C",
        name: key,
      });
    }
  }
  console.log(abnormal.value, A.value, B.value, C.value, nomal.value);
};
onMounted(() => {
  initResultData();
});
</script>

<style lang="scss" scoped>
.result {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  .result-left {
    background: #081736;
    width: 65%;

    height: 90vh;
  }
  .result-right {
    width: 34%;

    height: 90vh;
    display: flex;
    flex-direction: column;
    .result-right-top {
      height: 56%;
    }
    .result-right-bottom {
      height: 40%;
    }
  }
}
</style>
